﻿@using System.Globalization
@using MvcFileUploader.Models
@model MvcFileUploader.Models.FileUploadViewModel
@{
    var formId = "fileupload" + Guid.NewGuid();    

    var maxNoOfFiles = Model.MaxNumberOfFiles.HasValue ? Model.MaxNumberOfFiles.Value.ToString(CultureInfo.InvariantCulture) : "undefined";
}
        
<!-- file upload dialog/inline form-->

@if (Model.IsDialog) //popup dialog
{
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                
                @if(Model.ReturnOnClose)
                {
                    <a href="@Model.ReturnUrl" type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</a> 
                }
                else
                {
                    <a href="@Model.ReturnUrl" type="button" class="close" aria-hidden="true">&times;</a> 
                }
                
                <form role="form" class="form-inline" id="@formId" action="@Model.UploadUrl" method="POST" enctype="multipart/form-data">
                    <div class="fileupload-buttonbar">
                        <div class="btn-group">
                            <!-- The fileinput-button span is used to style the file input field as button -->
                            <span class="btn btn-success fileinput-button">
                                <i class="glyphicon glyphicon-plus"></i>
                                <span>Agregar archivos...</span>
                                @if (Model.MaxNumberOfFiles == 1)
                                {
                                    <input type="file" name="files[]"/>
                                }
                                else
                                {
                                    <input type="file" name="files[]" multiple/>
                                }                                
                            </span>
                            <button type="submit" class="btn btn-primary start">
                                <i class="glyphicon glyphicon-upload"></i>
                                <span>Adjuntar</span>
                            </button>
                            <button type="reset" class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancelar</span>
                            </button>
                            <!--<button type="button" class="btn btn-danger delete">
                                <i class="glyphicon glyphicon-trash"></i>
                                <span>Eliminar</span>
                            </button>                    
                            <input type="checkbox" class="toggle">-->
                        </div>

                        <!-- The global file processing state -->
                        <span class="fileupload-process"></span>
                        <!-- The global progress state -->
                        <div class="fileupload-progress fade">
                            <!-- The global progress bar -->
                            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                            </div>
                            <!-- The extended global progress state -->
                            <div class="progress-extended">&nbsp;</div>
                        </div>
                    </div>
                    <!-- The table listing the files available for upload/download -->
                    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
        
                    <!-- Additional values to be posted with form-->
                    @foreach (var postItem in Model.PostValuesWithUpload)
                    {
                        @Html.Hidden(postItem.Key, postItem.Value)
                    }
                </form>                
        
            </div>
        </div>
    </div>
}

else //inline
{
    switch (Model.ReturnUrl)
    {
        case "DetailsTicket":
            <form id="@formId" action="@Model.UploadUrl" method="POST" enctype="multipart/form-data">
                <div class="row fileupload-buttonbar">
                    <div class="col-lg-7">
                        <!-- The fileinput-button span is used to style the file input field as button -->
                        <span class="btn btn-success fileinput-button">
                            <i class="glyphicon glyphicon-plus"></i>
                            <span>Agregar archivos...</span>
                            @if (Model.MaxNumberOfFiles == 1)
                            {
                                <input type="file" name="files[]" />
                            }
                            else
                            {
                                <input type="file" name="files[]" multiple />
                            }
                        </span>
                        <button id="upload-files" type="submit" class="btn btn-primary start hidden">
                            <i class="glyphicon glyphicon-upload"></i>
                            <span>Adjuntar</span>
                        </button>
                        <button type="reset" class="btn btn-warning cancel">
                            <i class="glyphicon glyphicon-ban-circle"></i>
                            <span>Cancelar</span>
                        </button>
                    </div>

                    <!-- The global file processing state -->
                    <span class="fileupload-process"></span>
                    <!-- The global progress state -->
                    <div class="col-lg-5 fileupload-progress fade">
                        <!-- The global progress bar -->
                        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar progress-bar-success" style="width: 0%;"></div>
                        </div>
                        <!-- The extended global progress state -->
                        <div class="progress-extended">&nbsp;</div>
                    </div>
                </div>
                <!-- The table listing the files available for upload/download -->
                <div class="table-responsive">
                    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
                </div>

                <!-- Additional values to be posted with form-->
                @foreach (var postItem in Model.PostValuesWithUpload)
                {
                    @Html.Hidden(postItem.Key, postItem.Value)
                }
            </form>
            break;
        default:
        <form id="@formId" action="@Model.UploadUrl" method="POST" enctype="multipart/form-data">
            <div class="row fileupload-buttonbar">
                <div class="col-lg-7">
                    <!-- The fileinput-button span is used to style the file input field as button -->
                    <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>Agregar archivos...</span>
                        @if (Model.MaxNumberOfFiles == 1)
                        {
                            <input type="file" name="files[]" />
                        }
                        else
                        {
                            <input type="file" name="files[]" multiple />
                        }
                    </span>
                    <button type="submit" class="btn btn-primary start">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Adjuntar</span>
                    </button>
                    <button type="reset" class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancelar</span>
                    </button>
                </div>

                <!-- The global file processing state -->
                <span class="fileupload-process"></span>
                <!-- The global progress state -->
                <div class="col-lg-5 fileupload-progress fade">
                    <!-- The global progress bar -->
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar progress-bar-success" style="width: 0%;"></div>
                    </div>
                    <!-- The extended global progress state -->
                    <div class="progress-extended">&nbsp;</div>
                </div>
            </div>
            <!-- The table listing the files available for upload/download -->
            <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

            <!-- Additional values to be posted with form-->
            @foreach (var postItem in Model.PostValuesWithUpload)
            {
                @Html.Hidden(postItem.Key, postItem.Value)
            }
        </form>
        break;
    }

}



<!--template and scripts-->
@if (Model.RenderSharedScript)
{

    //template scripts are different for jquery ui
    if (Model.UIStyle == UploadUI.JQueryUI)
    {
        <!-- The template to display files available for upload for jquery ui -->        
        <script id="template-upload" type="text/x-tmpl">
        {% for (var i=0, file; file=o.files[i]; i++) { %}
            <tr class="template-upload fade">
                <td>
                    <span class="preview"></span>
                </td>
                <td>
                    <p class="name">{%=file.name%}</p>
                    <strong class="error text-danger"></strong>
                </td>
                <td>
                    <p class="size">Prrocesando...</p>
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                </td>
                <td>
                    {% if (!i && !o.options.autoUpload) { %}
                        <button class="btn btn-primary start">
                            <i class="glyphicon glyphicon-upload"></i>
                            <span>Comenzar</span>
                        </button>
                    {% } %}
                    {% if (!i) { %}
                        <button class="btn btn-warning cancel">
                            <i class="glyphicon glyphicon-ban-circle"></i>
                            <span>Cancelar</span>
                        </button>
                    {% } %}
                </td>
            </tr>
        {% } %}
        </script>
        
        <!-- The template to display files available for download for jquery ui -->
        
            <script id="template-download" type="text/x-tmpl">
                {% for (var i=0, file; file=o.files[i]; i++) { if (!file.error) { try { var bootGrid = $("#grid-data"); if(bootGrid) bootGrid.bootgrid("reload"); } catch(ex) { /*TODO: add some code here*/ } } else { %}
                <tr class="template-download fade">
                    <td>
                        <span class="preview">
                            {% if (file.thumbnailUrl) { %}
                                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                            {% } %}
                        </span>
                    </td>
                    <td>
                        <p class="name">
                            <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                        </p>
                        {% if (file.error) { %}
                            <div><span class="error">Error</span> Archivo no adjuntado</div>
                        {% } %}
                    </td>
                    <td>
                        <span class="size">{%=o.formatFileSize(file.size)%}</span>
                    </td>
                    <td>
                        <button class="delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>Eliminar</button>
                        <input type="checkbox" name="delete" value="1" class="toggle">
                    </td>
                </tr>
            {% } } %}
            </script>
    }
    else  // bootstrap templates
    {
        switch (Model.ReturnUrl)
        {
            case "DetailsTicket":
                <!-- The template to display files available for upload -->
                <script id="template-upload" type="text/x-tmpl">
                    {% for (var i=0, file; file=o.files[i]; i++) { %}
                    <tr class="template-upload fade">
                        <td>
                            <p class="name">{%=file.name%}</p>
                            <strong class="error text-danger"></strong>
                        </td>
                        <td>
                            <p class="size">Procesando...</p>
                            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                        </td>
                        <td>
                            {% if (!i && !o.options.autoUpload) { %}
                            <button class="btn btn-primary start hidden" disabled>
                                <i class="glyphicon glyphicon-upload"></i>
                                <span>Comenzar</span>
                            </button>
                            {% } %}
                            {% if (!i) { %}
                            <button class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancelar</span>
                            </button>
                            {% } %}
                        </td>
                    </tr>
                    {% } %}
                </script>
                <!-- The template to display files available for download -->
                <script id="template-download" type="text/x-tmpl">
                    {% for (var i=0, file; file=o.files[i]; i++) { if (!file.error) { try { var bootGrid = $("#grid-data"); if(bootGrid) bootGrid.bootgrid("reload"); } catch(ex) { /*TODO: add some code here*/ } } else { %}
                    <tr class="template-download fade">
                        <td>
                            <span class="preview">
                                {% if (file.thumbnailUrl) { %}
                                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                                {% } %}
                            </span>
                        </td>
                        <td>
                            <p class="name">
                                {% if (file.url) { %}
                                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                                {% } else { %}
                                <span>{%=file.name%}</span>
                                {% } %}
                            </p>
                            {% if (file.error) { %}
                            <div><span class="label label-danger">Error</span> Archivo no adjuntado</div>
                            {% } } %}
                        </td>
                        <td>
                            <span class="size">{%=o.formatFileSize(file.size)%}</span>
                        </td>
                        <td>
                            {% if (file.deleteUrl) { %}
                            <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deletewithcredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
                                <i class="glyphicon glyphicon-trash"></i>
                                <span>Delete</span>
                            </button>
                            <input type="checkbox" name="delete" value="1" class="toggle">
                            {% } else { %}
                            <button class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancelar</span>
                            </button>
                            {% } %}
                        </td>
                    </tr>
                    {% } %}
                </script>
                break;
            default:
                <!-- The template to display files available for upload -->
                <script id="template-upload" type="text/x-tmpl">
                    {% for (var i=0, file; file=o.files[i]; i++) { %}
                    <tr class="template-upload fade">
                        <td>
                            <span class="preview"></span>
                        </td>
                        <td>
                            <p class="name">{%=file.name%}</p>
                            <strong class="error text-danger"></strong>
                        </td>
                        <td>
                            <p class="size">Procesando...</p>
                            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                        </td>
                        <td>
                            {% if (!i && !o.options.autoUpload) { %}
                            <button class="btn btn-primary start" disabled>
                                <i class="glyphicon glyphicon-upload"></i>
                                <span>Comenzar</span>
                            </button>
                            {% } %}
                            {% if (!i) { %}
                            <button class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancelar</span>
                            </button>
                            {% } %}
                        </td>
                    </tr>
                    {% } %}
                </script>
                <!-- The template to display files available for download -->
                <script id="template-download" type="text/x-tmpl">
                    {% for (var i=0, file; file=o.files[i]; i++) { if (!file.error) { try { var bootGrid = $("#grid-data"); if(bootGrid) bootGrid.bootgrid("reload"); } catch(ex) { /*TODO: add some code here*/ } } else { %}
                    <tr class="template-download fade">
                        <td>
                            <span class="preview">
                                {% if (file.thumbnailUrl) { %}
                                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                                {% } %}
                            </span>
                        </td>
                        <td>
                            <p class="name">
                                {% if (file.url) { %}
                                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                                {% } else { %}
                                <span>{%=file.name%}</span>
                                {% } %}
                            </p>
                            {% if (file.error) { %}
                            <div><span class="label label-danger">Error</span> Archivo no adjuntado</div>
                            {% } } %}
                        </td>
                        <td>
                            <span class="size">{%=o.formatFileSize(file.size)%}</span>
                        </td>
                        <td>
                            {% if (file.deleteUrl) { %}
                            <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deletewithcredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
                                <i class="glyphicon glyphicon-trash"></i>
                                <span>Delete</span>
                            </button>
                            <input type="checkbox" name="delete" value="1" class="toggle">
                            {% } else { %}
                            <button class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancelar</span>
                            </button>
                            {% } %}
                        </td>
                    </tr>
                    {% } %}
                </script>
                break;
        }

    }


    <!-- Blueimp Jquery File Upload-->

    <script type="text/javascript" src="/Scripts/mvcfileupload/blueimp/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/Scripts/mvcfileupload/blueimp/tmpl.min.js"></script>
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <script src="/Scripts/mvcfileupload/blueimp/load-image.min.js"></script>
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="/Scripts/mvcfileupload/blueimp/canvas-to-blob.min.js"></script>

    <script type="text/javascript" src="/Scripts/mvcfileupload/blueimp/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="/Scripts/mvcfileupload/blueimp/jquery.fileupload.js"></script>
    <script type="text/javascript" src="/Scripts/mvcfileupload/blueimp/jquery.fileupload-process.js"></script>
    <script type="text/javascript" src="/Scripts/mvcfileupload/blueimp/jquery.fileupload-image.js"></script>
    <script type="text/javascript" src="/Scripts/mvcfileupload/blueimp/jquery.fileupload-validate.js"></script>
    <script type="text/javascript" src="/Scripts/mvcfileupload/blueimp/jquery.fileupload-ui.js"></script>

    <!-- Blueimp styles / see blueimp docs for styling requirements for jquery ui -->
    <link rel="stylesheet" href="/Content/mvcfileupload/blueimp/jquery.fileupload.css">
    <link rel="stylesheet" href="/Content/mvcfileupload/blueimp/jquery.fileupload-ui.css">

    if (Model.UIStyle == UploadUI.JQueryUI)
    {
        <script type="text/javascript" src="/Scripts/mvcfileupload/blueimp/jquery.fileupload-jquery-ui.js"></script>
    }
}
<!--template and scripts end-->

@switch (Model.ReturnUrl)
{
    case "DetailsTicket":
        <script type="text/javascript">
            // Initialize the jQuery File Upload widget:
            $('#@(formId)').fileupload({url: '@Model.UploadUrl'});

            $('#@(formId)').fileupload('option', {
                dropZone: $('#@(formId)'),
                maxFileSize: @Model.MaxFileSizeInBytes,
                maxNumberOfFiles: @maxNoOfFiles,
                disableImagePreview: @(Model.DisableImagePreview ? "true" : "false"),
                resizeMaxWidth: 1920,
                resizeMaxHeight: 1200,
                acceptFileTypes: @Model.FileTypes,
                sequentialUploads: true
            });

            $('#@(formId)')
                .bind('fileuploaddone', function (e, data) {
                    var activeUploads = $('#@(formId)').fileupload('active');
                    if (activeUploads == 1) {
                        fileuploaddone(e, data);
                    }
                });
        </script>
        break;
    default:
        <script type="text/javascript">
            // Initialize the jQuery File Upload widget:
            $('#@(formId)').fileupload({url: '@Model.UploadUrl'});

            $('#@(formId)').fileupload('option', {
                dropZone: $('#@(formId)'),
                maxFileSize: @Model.MaxFileSizeInBytes,
                maxNumberOfFiles: @maxNoOfFiles,
                disableImagePreview: @(Model.DisableImagePreview ? "true" : "false"),
                resizeMaxWidth: 1920,
                resizeMaxHeight: 1200,
                acceptFileTypes: @Model.FileTypes,
                sequentialUploads: true
            });
        </script>
        break;
}

